var left = document.querySelector('.left');
var addArticle = document.querySelector('.add_article');
var controlArticle = document.querySelector('.control_article');
var backHomeBtn = document.querySelector('.back_home')
var right = document.querySelector('.right');
var article = document.querySelector('.article');
var inputTitle = document.querySelector('.input_title');
var inputClassify = document.querySelector('.input_classify');
var inputContent = document.querySelector('.input_content');
var inputSubmitBtn = document.querySelector('.input_submit');
var list = document.querySelector('.list');
var listUl = document.querySelector('.list_ul');


// 点击切换查看文章列表和添加文章功能
addArticle.addEventListener('click',function() {
    // 加入active类
    addArticle.className = 'add_article active';
    controlArticle.className = 'control_article';
    article.style.zIndex = '100';
    list.style.zIndex = '0';
})
controlArticle.addEventListener('click',function() {
    addArticle.className = 'add_article';
    controlArticle.className = 'control_article active';
    article.style.zIndex = '0';
    list.style.zIndex = '100';
})

// 渲染全部文章列表
function renderAllArticle(data) {
    listUl.innerHTML = '';
    // 当有新文章发布后 列表清空重新渲染
    var list = JSON.parse(data);
    list.forEach((item) => {
        var li = document.createElement('li');
        var span = document.createElement('span');
        var btnBox = document.createElement('div');
        var readBtn = document.createElement('button');
        var deleteBtn = document.createElement('button');
        li.className = 'list_item';
        span.className = 'item_title';
        btnBox.className = 'button_box';
        readBtn.className = 'item_read';
        deleteBtn.className = 'item_delete';
        span.innerText = item.title;
        readBtn.innerText = '阅读';
        deleteBtn.innerText = '删除';
        readBtn.setAttribute('data_index',item._id);
        deleteBtn.setAttribute('data_index',item._id);
        addDeleteEvents(deleteBtn);
        addReadEvents(readBtn);
        li.appendChild(span);
        btnBox.appendChild(readBtn);
        btnBox.appendChild(deleteBtn);
        li.appendChild(btnBox);
        listUl.appendChild(li);
    })
}

// 给删除按钮添加事件按钮
function addDeleteEvents(e) {
    e.addEventListener('click',function() {
        var id = this.getAttribute('data_index');
        myAjax('POST','/admin/deleteArticle',{id:id}).then((data) => {
            alert(data); // 文章删除成功对话框
            getData(); // 重新渲染
        })
    })
}

// 给阅读按钮添加事件
function addReadEvents(e) {
    e.addEventListener('click',function() {
        var id= this.getAttribute('data_index');
        location.href = `getPage?id=${id}`;
    })
}

// 添加文章功能实现
inputSubmitBtn.addEventListener('click',function() {
    var title = inputTitle.value;
    var classify = inputClassify.value;
    var content = inputContent.value;
    myAjax('POST','/admin/addArticle',{title,classify,content}).then((data) => {
        alert(data);
        inputTitle.value = '';
        inputClassify.value = '';
        inputContent.value = '';
        getData();
    })
})

// 点击返回首页
backHomeBtn.addEventListener('click',function() {
    location.href = '/';
})


// async函数 getData()
async function getData() {
    // 渲染全部文章列表
    var getAllArticle = await myAjax('GET','/admin/getAllArticle',null);
    renderAllArticle(getAllArticle);
}

// 初始化
getData();

